<!DOCTYPE html><head>
	<meta charset="utf-8">
	<title>Contact Page with Contact Form and Google Map - Fashionic Ajax Respondsive HTML Template</title>
	
	<!-- CSS
	  ================================================== -->
	<link rel="stylesheet" media="all" type="text/css" href="styles/mediaelementplayer.min.css" />
	<link rel="stylesheet" media="all" type="text/css" href="styles/supersized.css" />
	<link rel="stylesheet" media="all" type="text/css" href="js/themes/classic/galleria.classic.css" />
	<link rel="stylesheet" media="all" type="text/css" href="style.css" />
	<link rel="stylesheet" media="all" type="text/css" href="styles/light.css" /><!--Color scheme include: light.css and dark.css-->
	<link rel="stylesheet" media="all" type="text/css" href="styles/respondsive.css" />
	<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="styles/retina.css" />

	 <!--Mobile Specific Metas
	  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<!-- JS
 	================================================== -->
	<script type='text/javascript' src='js/jquery.js'></script>
	<script type='text/javascript' src='js/jquery.easing.min.js'></script>
	<script type='text/javascript' src='js/jquery.infinitescroll.min.js'></script>
	<script type='text/javascript' src='js/mediaelement-and-player.min.js'></script>
	<script type='text/javascript' src='js/jquery.hoverIntent.js'></script>
	<script type='text/javascript' src='js/supersized.3.2.7.min.js'></script>
	<script type='text/javascript' src='js/supersized.shutter.min.js'></script>
	<script type='text/javascript' src='js/galleria-1.2.8.min.js'></script>
	<script type='text/javascript' src='js/themes/classic/galleria.classic.js'></script>
	<script type='text/javascript' src='js/jquery.hoverdir.js'></script>
	<script type='text/javascript' src='js/color.js'></script>
	<script type='text/javascript' src='../../../maps.google.com/maps/api/js_805DD1E9'></script><!--For Google Map-->
	<script type='text/javascript' src='js/jquery.ui.map_21ED03C2.js'></script><!--For Google Map-->
	<script type='text/javascript' src='js/jquery.isotope.js'></script>
	<script type='text/javascript' src='js/main.js'></script>
	
	<!--Fullscreen slider -->
	<script type="text/javascript">
			
			jQuery(function($){
				
				$.supersized({
				
					// Functionality
					slideshow               :   1,			// Slideshow on/off
					autoplay				:	1,			// Slideshow starts playing automatically
					start_slide             :   1,			// Start slide (0 is random)
					stop_loop				:	0,			// Pauses slideshow on last slide
					random					: 	0,			// Randomize slide order (Ignores start slide)
					slide_interval          :   3000,		// Length between transitions
					transition              :   0, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
					transition_speed		:	1000,		// Speed of transition
					new_window				:	1,			// Image links open in new window/tab
					pause_hover             :   0,			// Pause slideshow on hover
					keyboard_nav            :   1,			// Keyboard navigation on/off
					performance				:	1,			// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
					image_protect			:	1,			// Disables image dragging and right click with Javascript
															   
					// Size & Position						   
					min_width		        :   0,			// Min width allowed (in pixels)
					min_height		        :   0,			// Min height allowed (in pixels)
					vertical_center         :   1,			// Vertically center background
					horizontal_center       :   1,			// Horizontally center background
					fit_always				:	0,			// Image will never exceed browser width or height (Ignores min. dimensions)
					fit_portrait         	:   1,			// Portrait images will not exceed browser height
					fit_landscape			:   0,			// Landscape images will not exceed browser width
															   
					// Components							
					slide_links				:	'blank',	// Individual links for each slide (Options: false, 'number', 'name', 'blank')
					thumb_links				:	1,			// Individual thumb links for each slide
					thumbnail_navigation    :   0,			// Thumbnail navigation
					slides 					:  	[			// Slideshow Images
					{image : '../../wp/fashionic/files/2012/08/photodune-2582132-dubai-m-copy.jpg', title : '<a href="" title="123 Amphitheatre Parkway Mountain View ">123 Amphitheatre Parkway Mountain View </a>', thumb : '', url : ''}																																																								],
									
					// Theme Options			   
					progress_bar			:	1,			// Timer for each slide							
					mouse_scrub				:	0
					
				});
				
		    });
	</script>
		
	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="img/favicon.ico">
	<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-114x114.png">
	
	<!-- IE hack
	================================================== -->
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<!--[if lte IE 8 ]>
	<script type="text/javascript" src="js/ie.js"></script>
	<link rel="stylesheet" media="all" type="text/css" href="styles/ie.css" />
	<![endif]-->
	
	<!--[if lte IE 6]>
	<div style="width: 100%;" class="messagebox_orange">Your browser is obsolete and does not support this webpage. Please use newer version of your browser or visit <a href="http://www.ie6countdown.com/" target="_new">Internet Explorer 6 countdown page</a>  for more information. </div>
	<![endif]-->	
	
	<!--/////////////
	//Google Fonts//
	///////////////-->
	<link href='../../../fonts.googleapis.com/css_362961CB' rel='stylesheet' type='text/css'>
	<link href='../../../fonts.googleapis.com/css_D6542681' rel='stylesheet' type='text/css'>
	<link href='../../../fonts.googleapis.com/css_96849461' rel='stylesheet' type='text/css'>
	
</head>

<body class="single">
<div id="wrap">

<!--/////////////////////////////////////////////
//////////                         /////////////
//////////    Left Sidebar Area   //////////////
/////////                         /////////////
////////////////////////////////////////////-->	
	<div id="siderbar" class="sidebar_forlist">
	<div class="sidebar_wrapmost">
	
	<!--
	////////////////
	     Logo
	///////////////
	-->	
		<p id="logo"><a href="index.html" title="Fashionic Template"><img src="img/logo.png" alt="Fashionic Template" width="250" height="90"></a></p>
		<p id="logo_retina"><a href="index.html" title="Fashionic Template"><img src="img/logo_retina.png" alt="Fashionic Template" width="250" height="90"></a></p><!--Logo For High Resolution -->
				
			
	<!--
	//////
	 Menu
	//////
	-->	
		<div class="menu_wrap">
			<div id="navi" class="clearfix">
			<ul class="menu">
				<li class="menu-item"><a href="index.html">HOME</a></li>
				<li class="menu-item">
					<a href="index.html">PORTFOLIO</a>
					<!--Submenu for Portfolio item-->
					<ul class="sub-menu">
						<li class="menu-item"><a href="portfolio_list_23.html">Portfolio 2:3</a></li>
						<li class="menu-item"><a href="portfolio_list_32.html">Portfolio 3:2</a></li>
						<li class="menu-item"><a href="portfolio_list_11.html">Portfolio 1:1</a></li>
						<li class="menu-item"><a href="portfolio_list_tumblr.html">Tumblr Style</a></li>
					</ul>
					<!--End Submenu for Portfolio item-->
				</li>
				<li class="menu-item">
					<a href="magazine.html">MAGAZINE</a>
					<ul class="sub-menu">
						<li class="menu-item"><a href="magazine_with_slider.html">Magazine with Slider</a></li>
						<li class="menu-item"><a href="magazine_with_border.html">List with Border</a></li>
					</ul>
				</li>
				<li class="menu-item">
					<a href="javascript:;">FEATURES</a>
					<!--Submenu for Features item-->
					<ul class="sub-menu">
						
						<li class="menu-item"><a href="feature_list_style.html">List Page Style</a></li>
						<li class="menu-item"><a href="feature_slider.html">Slider</a></li>
						<li class="menu-item"><a href="feature_pagination.html">Pagination</a></li>
					</ul>
					<!--End Submenu for Features item-->
				</li>
				<li class="menu-item current-menu-parent"><a href="javascript:;">PAGE EXAMPLES</a>
					<ul class="sub-menu">
						<li class="menu-item"><a href="about.html">About</a></li>
						<li class="menu-item current-menu-item"><a href="contact.html">Contact</a></li>
					</ul>
				</li>
			</ul>
			</div><!--End navi-->
		</div><!--End menu_wrap-->
	</div><!--End sidebar_wrapmost-->
	
	<div id="siderbar_bottom">
	
	<!--
	//////////////
	Search box
	/////////////
	-->	
		<div id="search" class="searchcss social_active">
			<form id="search_form" name="" method="get" class="search-form_header" action="#">
			<span class="searchicon"></span><input type="text" onBlur="if (this.value == '') {this.value = 'Search';}" onFocus="if (this.value == 'Search') {this.value = '';}" id="s" name="s" value="Search" class="textboxsearch"><input type="submit" value="" class="submitsearch" name="submitsearch">
</form>
		</div><!--END search-->
		
	<!--
	///////////
	Social icons 
	(it is not displayed in mobile device)
	///////////
	-->	
		
		<div id="social_icon">
			<a id="social_facebook" class="social_active" href="../../../www.facebook.com/uiueux/index.htm" title="Visit Facebook page"><span></span></a><!--Facebook-->
			<a id="social_twitter" class="social_active" href="../../../www.twitter.com/uiueux/index.htm" title="Visit Twitter page"><span></span></a><!--Twitter-->
			<a id="social_google_plus" class="social_active" href="#" title="Visit Google Plus page"><span></span></a><!--Google plus-->
			<a id="social_pinterest" class="social_active" href="#" title="Visit Pinterest page"><span></span></a><!--Pinterest-->
			<a id="social_dribbble" class="social_active" href="#" title="Visit Dribbble page"><span></span></a><!--Dribbble-->	
			<!--<a id="social_trumblr" class="social_active" href="#" title="Visit Tumblr page"><span></span></a> Trumblr-->
			<!--<a id="social_youtube" class="social_active" href="#" title="Visit Youtube page"><span></span></a> Youtube-->
			<!--<a id="social_flickr" class="social_active" href="#" title="Visit Flickr page"><span></span></a> Flickr-->
			<!--<a id="social_vimeo" class="social_active" href="#" title="Visit Vimeo page"><span></span></a> Vimeo-->
			<!--<a id="social_linkedin" class="social_active" href="#" title="Visit LinkedIn page"><span></span></a> Linkedin-->
			<!--<a id="social_forst" class="social_active" href="#" title="Visit Forst page"><span></span></a> Forst-->
			<!--<a id="social_github" class="social_active" href="#" title="Visit Github page"><span></span></a> Github-->
			<!--<a id="social_rss" class="social_active" href="#" title="Rss"><span></span></a> Rss-->			
		</div><!--END social_icon-->
		
	
	<!--
	///////////
	copyright 
	(it is not displayed in mobile device)
	///////////
	-->			
		<div id="copyright">Copyright @ uiueux.com</div>
	</div><!--END siderbar_bottom-->	
	</div><!--End sidebar-->



	<!---/////////////////////////////////////////////
	//////////                         /////////////
	//////////    Main Content Area   //////////////
	/////////                         /////////////
	////////////////////////////////////////////-->	
	<div id="content">
		
		<div id="single-wrap">
		
			<h1>CONTACT</h1>
			
			<div class="entry clearfix">
				
				<div class="fixed_column" style="width:400px; margin-right:40px; margin-left:0; margin-top:0; margin-bottom:0">Ridiculus penatibus pulvinar egestas hac arcu eros augue rhoncus, Magna nascetur aliquet enim elit facilisis. Ridiculus penatibus pulvinar egestas hac arcu eros augue rhoncus, nisi sed purus porta ac enim diam auctor turpis proin. Lundium dapibus!
				
					<!--/////////////
					//Contact Form//
					/////////////-->
					<p>
					<div class="contactform">
						<h2>Contant</h2>
						<form action="../../wp/fashionic/contact/index.htm" id="contact-form" class="contact_form" method="POST">
							<p><input type="text" id="idi_name" name="idi_name" class="requiredField" value="Name*" onBlur="if (this.value =='' ) {this.value = 'Name*';}" onFocus="if (this.value == 'Name*' || this.value == 'Required' ) { this.value = ''; }" /></p>
							<p><input type="text" id="idi_mail" name="idi_name" class="requiredField email" value="Email*" onBlur="if (this.value =='' ) {this.value = 'Email*';}" onFocus="if (this.value == 'Email*' || this.value  == 'Required' || this.value == 'Invalid email' ) {this.value = '';}" /></p>
							<p><textarea rows="4" name="idi_text" id="idi_text" cols="4" class="requiredField inputError"  onfocus="if (this.value == 'Required') {this.value = '';}"></textarea></p>
							<input type="hidden" value="send" name="idi_form" />
							<p class="btnarea"><input type="submit" id="idi_send" name="idi_send" class="idi_send" value="SEND" /></p>
						</form>
					</div><!--End contactform-->
					</p>
				</div><!--End fixed_column-->
				
				<div class="fixed_column" style="width:400px; margin-right:0; margin-left:0; margin-top:0; margin-bottom:0">
					<div class="list_style list_style_location"> Address: 123 Amphitheatre Parkway Mountain View </div><span class="line_blank_half"></span>
					<div class="list_style list_style_phone"> Phone: +83 (32) 982133 Fax: +83(32) 23232</div><span class="line_blank_half"></span>
					<div class="list_style list_style_mail"> Email: uiueux@gmail.com</div>
					
					<!--//////////
					//Google Map//
					//////////-->
					<div id="map_canvas" class="map rounded" style="width:100%; height:220px; margin-top:20px;"></div>
					<input value="42.03296272471851, -91.40622499999995" name="location"  type="hidden"/><!--Map Location (Lat/Lng)-->
					<input value="12" name="mapzoom"  type="hidden"/><!--Zoomed (number)-->
					<input value="ROADMAP" name="maptype"  type="hidden"/><!--Map style include: ROADMAP/SATELLITE/HYBRID/TERRAIN-->
				</div><!--End fixed_column-->
		</div>
	
	<!--Js codes for Google map and Contact form-->
	<script type="text/javascript">
	
	// #################################
	// Map UI for page / no ajax
	// ################################
	
	if(jQuery('#map_canvas').length>0) {
		function initialize() {
			var mapzoom = parseInt(jQuery('input[name="mapzoom"]').val());
			var location = jQuery('input[name="location"]').val();
			var maptype = jQuery('input[name="maptype"]').val();
			
			jQuery("#map_canvas").gmap({ 
				"center": location, 
				"zoom": mapzoom,
				"mapTypeControl": true, 
				"mapTypeId": google.maps.MapTypeId.maptype, 
				"mapTypeControlOptions": { 
					"position":google.maps.ControlPosition.TOP_RIGHT, 
					"style":google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
				},
				"OTHER_PARAMS":"OTHER_VALUE",
				"callback": function() {
				var self = this;
				self.addMarker({"position": this.get("map").getCenter() });	
				}//end callback
			});
		}
		initialize();
	} //End if
	
	// #################################
	// Verification Form
	// ################################
	
	jQuery(document).ready(function($){ 
	if(jQuery('.contactform').length>0) {
		jQuery('form#contact-form').submit(function() {
			//$('form#contact-form .error').remove();
			//$('form#contact-form .required').remove();
			var hasError = false;
			jQuery('.requiredField').each(function() {
				if(jQuery.trim($(this).val()) == '' || jQuery.trim($(this).val()) == 'Name*' || jQuery.trim($(this).val()) == 'Email*' || jQuery.trim($(this).val()) == 'Required' || jQuery.trim($(this).val()) == 'Invalid email') {
					$(this).attr("value","Required");
					hasError = true;
				}else if($(this).hasClass('email')) {
            	var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            	if(!emailReg.test(jQuery.trim($(this).val()))) {
            		$(this).attr("value","Invalid email");
            		hasError = true;
            		}
           		}else{
				}
			});
			//After verification , print some infos. 
			if(!hasError) {
				jQuery('form#contact-form #idi_send').fadeOut('normal', function() {										  
					jQuery(this).parent().append('<p class="sending">Sending...</p>');
				});
				var formInput = jQuery(this).serialize();
				jQuery.post(jQuery(this).attr('action'),formInput, function(data){
					jQuery('form#contact-form').slideUp("fast", function() {
						jQuery(this).before('<p class="success">Thanks, your email was successfully sent.</p>');
						jQuery('.sending').fadeOut();
					});
				});
			}
			return false;
	
		});
		} //End if
	});
	</script>
		</div><!--End single-wrap-->
		
		<!--//////////////////
		//Funllscreen Slider//
		///////////////////-->
		
		<!--Thumbnail Navigation-->
		<div id="prevthumb"></div>
		<div id="nextthumb"></div>
		
		<!--Arrow Navigation. If multiple pictures, you could open it 
		<a id="prevslide" class="load-item"></a>
		<a id="nextslide" class="load-item"></a>-->
		
		<!--Time Bar-->
		<div id="progress-back" class="load-item">
			<div id="progress-bar"></div>
		</div>
		
		<!--Control Bar-->
		<div id="controls-wrapper" class="load-item">
			<div id="controls">
			
				<!--Slide counter-->
				<div id="slidecounter">
					<span class="slidenumber"></span> / <span class="totalslides"></span>
				</div>
				
				<!--Slide captions displayed here-->
				<div id="slidecaption"></div>
				
				<!--Thumb Tray button-->
				<a id="tray-button"><img id="tray-arrow" src="../../wp/fashionic/wp-content/themes/fashionic/img/bgslider/button-tray-up.png" alt="tray" /></a>
				
				<!--Navigation (dot). If multiple pictures, you could open it 
				<ul id="slide-list"></ul>-->
				
			</div>
		</div>
		<div id="supersized-loader"></div><ul id="supersized"></ul>
		<!--//////////////////
		//End Funllscreen Slider//
		///////////////////-->
		
	</div><!--END content -->
	
		<!--//////////////////////////////////
		//// Social icons for mobile devices //
		//////////////////////////////-/////-->
		
		<div id="social_icon" class="social_icon_mobile">
			<a id="social_facebook" class="social_active" href="../../../www.facebook.com/uiueux/index.htm" title="Visit Facebook page"><span></span></a><!--Facebook-->
			<a id="social_twitter" class="social_active" href="../../../www.twitter.com/uiueux/index.htm" title="Visit Twitter page"><span></span></a><!--Twitter-->
			<a id="social_google_plus" class="social_active" href="#" title="Visit Google Plus page"><span></span></a><!--Google plus-->
			<a id="social_pinterest" class="social_active" href="#" title="Visit Pinterest page"><span></span></a><!--Pinterest-->
			<a id="social_dribbble" class="social_active" href="#" title="Visit Dribbble page"><span></span></a><!--Dribbble-->	
			<!--<a id="social_trumblr" class="social_active" href="#" title="Visit Tumblr page"><span></span></a> Trumblr-->
			<!--<a id="social_youtube" class="social_active" href="#" title="Visit Youtube page"><span></span></a> Youtube-->
			<!--<a id="social_flickr" class="social_active" href="#" title="Visit Flickr page"><span></span></a> Flickr-->
			<!--<a id="social_vimeo" class="social_active" href="#" title="Visit Vimeo page"><span></span></a> Vimeo-->
			<!--<a id="social_linkedin" class="social_active" href="#" title="Visit LinkedIn page"><span></span></a> Linkedin-->
			<!--<a id="social_forst" class="social_active" href="#" title="Visit Forst page"><span></span></a> Forst-->
			<!--<a id="social_github" class="social_active" href="#" title="Visit Github page"><span></span></a> Github-->
			<!--<a id="social_rss" class="social_active" href="#" title="Rss"><span></span></a> Rss-->	
		</div><!--END social-->
		
		<!--//////////////////////////////////////
		//// Copyright info. for mobile devices //
		//////////////////////////////-/////-->
		<div id="copyright_mobile" style="">Copyright @ uiueux.com</div>
</div>
<!--Back Top button-->
<div id="top"></div>
</body>
</html>